import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { addCart } from '../store/slice/cartSlice';
/**
 * 商品列表页
 * @returns 
 */
export default function GoodsList() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const { goodsList } = useSelector(state => state.goods);
    return (
        <div>
            <ul>

                {goodsList.map(goods => (
                    <li key={goods.id}>
                        <p>商品名: {goods.gname}</p>
                        <p>价格: {goods.price}</p>
                        <p><button onClick={() => {
                            dispatch(addCart(goods))// {type:'cart/addCart', payload:goods}
                            // 跳转到购物车列表页
                            navigate('/cart_list')
                        }}>加入购物车</button></p>
                    </li>
                ))}
            </ul>
        </div>
    )
}
